<template>
  <div class="dialogForm">
    <!-- 修改新增弹窗 -->
    <el-dialog
      :title="permissTitle"
      :visible.sync="showDialog"
      :close-on-click-modal="issShow"
      :show-close="issShow"
      @closed="closeDialog"
    >
      <el-tree
        ref="tree"
        check-strictly
        :data="permissionList"
        show-checkbox
        default-expand-all
        node-key="id"
        highlight-current
        :props="defaultProps"
        icon-class=" ed"
        :default-checked-keys="checkList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmPermiss">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { assignPrem } from '@/api/role'

export default {
  name: 'DialogForm',
  data() {
    return {
      issShow: false,
      showDialog: false,
      // 权限选中列表
      checkList: [],
      // 权限分配所有列表
      permissionList: [],
      // 表单信息
      roleForm: {
        name: '',
        description: ''
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  computed: {
    permissTitle() {
      return `为【${this.roleForm.name}】分配权限`
    }
  },
  methods: {
    // 关闭弹窗的回调事件
    closeDialog() {
      this.$refs.tree.setCheckedKeys([])

      this.roleForm = {
        name: '',
        description: '',
        id: ''
      }
    },
    // 弹窗确定的点击事件

    async confirmPermiss() {
      await assignPrem({
        id: this.roleForm.id,
        permIds: this.$refs.tree.getCheckedKeys()
      })
      this.$message.success('分配权限成功')

      this.showDialog = false
    }
  }
}
</script>

<style lang="scss">
.dialogForm {
  .el-tree {
    .el-tree-node__content {
      height: 40px;
    }
  }
}
</style>
